{% extends "libsys/base/base_page.html" %}
{% load staticfiles %}
{% block header_script %}
    <script type="application/x-javascript">
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        } </script>
{% endblock %}
{% block content %}
    <div class="banner">
        <div class="container">
            <div class="banner-text agileits-w3layouts">
                <div id="top" class="callbacks_container">
                    <ul class="rslides" id="slider3">
                        <li>
                            <div class="banner-textagileinfo">
                                <h6>欢迎加入</h6>
                                <h3>Sanfen's 图书馆</h3>
                                <div class="more">
                                    <a href="#" data-toggle="modal" data-target="#myModal">获取更多内容</a>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- modal-sign -->
    <div class="modal bnr-modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body modal-spa">
                    <img class="img-responsive" src="{% static 'libsys/images/g1.jpg ' %}" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis enim, non convallis
                        felis mattis at. Donec fringilla lacus eu pretium rutrum. Cras aliquet congue ullamcorper. Etiam
                        mattis eros eu ullamcorper volutpat. Proin ut dui a urna efficitur varius. uisque molestie
                        cursus mi
                        et congue consectetur adipiscing elit cras rutrum iaculis enim, Lorem ipsum dolor sit amet, non
                        convallis felis mattis at. Maecenas sodales tortor ac ligula ultrices dictum et quis urna. Etiam
                        pulvinar metus neque, eget porttitor massa vulputate in. Fusce lacus purus, pulvinar ut lacinia
                        id,
                        sagittis eu mi. Vestibulum eleifend massa sem, eget dapibus turpis efficitur at. Aliquam viverra
                        quis leo et efficitur. Nullam arcu risus, scelerisque quis interdum eget, fermentum viverra
                        turpis.
                        Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias
                        consequatur aut At vero eos </p>
                </div>
            </div>
        </div>
    </div>
    <!-- //modal-sign -->
    <div class="tlinks">Collect from <a href="">Lib-WEB</a></div>
    <!-- //banner -->


            <div class="clearfix"></div>
        </div>
    </div>
    <!-- //welcome -->
    <!-- testimonials -->
    <div class="testimonials">
        <div class="container">
            <div class="w3ls-title">
                <h3 class="w3ls-title">Testimonials</h3>
            </div>
            <div class="slidw3-agileits">
                <div class="col-md-4 slid-w3text">
                    <h4>Filan Isteku</h4>
                    <p>"Proin tincidunt sodales faucibus. Curabitur ut metus sed urna dignissim sodales ac a tellus. Sed
                        varius justo tellus, at convallis libero cursus non. In malesuada accumsan felis, a imperdiet
                        arcu
                        blandit sed. Ut id faucibus eros. Fusce sed vulputate dui."</p>
                </div>
                <div class="col-md-4 slid-w3text">
                    <h4>Ullam Firose</h4>
                    <p>"Proin tincidunt sodales faucibus. Curabitur ut metus sed urna dignissim sodales ac a tellus. Sed
                        varius justo tellus, at convallis libero cursus non. In malesuada accumsan felis, a imperdiet
                        arcu
                        blandit sed. Ut id faucibus eros. Suspendisse commodo tempor magna" </p>
                </div>
                <div class="col-md-4 slid-w3text">
                    <h4>Metus Ipsum</h4>
                    <p>"Proin tincidunt sodales faucibus. Curabitur ut metus sed urna dignissim sodales ac a tellus. Sed
                        varius justo tellus, at convallis libero cursus non. In malesuada accumsan felis, a imperdiet
                        arcu
                        blandit sed. Ut id faucibus eros. Suspendisse commodo tempor magna" </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <!-- //testimonials -->

    <!-- features -->
    <div class="features">
        <div class="container">
            <div class="w3ls-title">
                <h3 class="agileits-title">未来规划</h3>
            </div>
            <div class="features-agilerow">
                <div class="col-sm-6 features-left">
                    <div class="features-w3grid">
                        <div class="col-xs-3 features-w3grid-left">
                            <i class="fa fa-heart-o" aria-hidden="true"></i>
                        </div>
                        <div class="col-xs-9 features-w3grid-right">
                            <h4>Itaque earum rerum </h4>
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum </p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="features-w3grid features-w3grid-mdl">
                        <div class="col-xs-3 features-w3grid-left">
                            <i class="fa fa-cogs" aria-hidden="true"></i>
                        </div>
                        <div class="col-xs-9 features-w3grid-right">
                            <h4>Sapiente delectus</h4>
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum </p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="features-w3grid">
                        <div class="col-xs-3 features-w3grid-left">
                            <i class="fa fa-line-chart" aria-hidden="true"></i>
                        </div>
                        <div class="col-xs-9 features-w3grid-right">
                            <h4>Itaque earum rerum </h4>
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum </p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="col-sm-6 features-left">
                    <div class="features-w3grid">
                        <div class="col-xs-3 features-w3grid-left">
                            <i class="fa fa-cogs" aria-hidden="true"></i>
                        </div>

                        <div class="col-xs-9 features-w3grid-right">
                            <h4>Itaque earum rerum </h4>
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum </p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="features-w3grid features-w3grid-mdl">
                        <div class="col-xs-3 features-w3grid-left">
                            <i class="fa fa-line-chart" aria-hidden="true"></i>
                        </div>

                        <div class="col-xs-9 features-w3grid-right">
                            <h4>Sapiente delectus</h4>
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum </p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="features-w3grid">
                        <div class="col-xs-3 features-w3grid-left">
                            <i class="fa fa-heart-o" aria-hidden="true"></i>
                        </div>
                        <div class="col-xs-9 features-w3grid-right">
                            <h4>Itaque earum rerum </h4>
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum </p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <!-- //features -->
    <!-- work start here -->
    <div class="work jarallax">
        <div class="container">
            <div class="work-agileinfo">
                <h3>你喜欢阅读吗?</h3>
                <p>加入我们，获取更多的学习渠道</p>

            </div>
        </div>
    </div>
    <!-- work end here -->
    <!-- news -->
    <div class="news">
        <div class="container">
            <div class="w3ls-title">
                <h3 class="agileits-title">图书上新</h3>
            </div>
            <div class="agileits_w3layouts_news_grids">
                <div class="col-md-3 col-xs-6 agileits_w3layouts_news_grid">
                    <div class="w3_agileits_news_grid">
                        <img src="{% static 'libsys/book_image/5811adaeN150186c5.jpg' %}" alt=" " class="img-responsive"/>
                        <div class="w3_agileits_news_grid_pos">
                            <h4>10 Aug 2017</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-6 agileits_w3layouts_news_grid">
                    <div class="w3_agileits_news_grid">
                        <img src="{% static 'libsys/book_image/5811adaeN150186c5.jpg' %}" alt=" " class="img-responsive"/>
                        <div class="w3_agileits_news_grid_pos">
                            <h4>15 Aug 2017</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-6 agileits_w3layouts_news_grid">
                    <div class="w3_agileits_news_grid">
                        <img src="{% static 'libsys/book_image/5811adaeN150186c5.jpg' %}" alt=" " class="img-responsive"/>
                        <div class="w3_agileits_news_grid_pos">
                            <h4>20 Sep 2017</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-6 agileits_w3layouts_news_grid">
                    <div class="w3_agileits_news_grid">
                        <img src="{% static 'libsys/book_image/5811adaeN150186c5.jpg' %}" alt=" " class="img-responsive"/>
                        <div class="w3_agileits_news_grid_pos">
                            <h4>14 Oct 2017</h4>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <!-- //news -->

{% endblock %}
{% block foot_script %}
    <script>
        // You can also use "$(window).load(function() {"
        $(function () {
            // Slideshow 3
            $("#slider3").responsiveSlides({
                auto: false,
                pager: true,
                nav: false,
                speed: 500,
                namespace: "callbacks",
                before: function () {
                    $('.events').append("<li>before event fired.</li>");
                },
                after: function () {
                    $('.events').append("<li>after event fired.</li>");
                }
            });

        });
    </script>
{% endblock %}